<template>
    <el-form label-width="80px"  :model="universalForm" ref="dictFormRule" >
        <div v-for="(item,i) in fieldList" >
          <el-form-item :label="item.nameZh" :prop="item.nameEn"  >
            <component :is="item.fieldType" :pData="item"></component>
          </el-form-item>
        </div>
    </el-form>
</template>

<script>
    import * as itemElement from "@/components/BaseControl/itemElement.js"
    import { ref, reactive, provide } from "vue";

    export default {
        name: "DynamicForm",
        components: {
           ...itemElement
        },
        data() {
        },
        setup() {
            let universalForm = reactive({
                id: "",
            });

            const p_changeFormData = (key, val) => {
                universalForm[key] = val;
            };
            provide("p_changeFormData", p_changeFormData);

            const fieldList = reactive([
                {
                    nameZh: '姓名',
                    nameEn: 'name',
                    fieldType: 'string',
                    zhi: "李方友"
                },{
                    nameZh: '说明',
                    nameEn: 'shuoming',
                    fieldType: 'multiple',
                    zhi: '最帅',
                },{
                    nameZh: '性别',
                    nameEn: 'sex',
                    fieldType: 'select',
                    zhi: 1,
                    selectObj: [{
                        value: 1,
                        label: '男'
                    }, {
                        value: 0,
                        label: '女'
                    }]
                },{
                    nameZh: '内容',
                    nameEn: 'content',
                    fieldType: 'richText',
                    zhi: '<h1 id="6h09s">HelloWorld</h1>',
                },{
                    nameZh: '爱好',
                    nameEn: 'aihao',
                    fieldType: 'selectMultiple',
                    zhi: '1,3,5',
                    selectObj: [{
                        id: '1',
                        name: '打游戏',
                        pid: '0',
                        value: 'A01'
                    }, {
                        id: '2',
                        name: '看书',
                        pid: '0',
                        value: 'A02'
                    }, {
                        id: '3',
                        name: '打篮球',
                        pid: '1',
                        value: 'A03'
                    }, {
                        id: '4',
                        name: '踢足球',
                        pid: '0',
                        value: 'A04'
                    }, {
                        id: '5',
                        name: '看动漫',
                        pid: '0',
                        value: 'A05'
                    }]
                }
            ]);







            return {
                universalForm,
                fieldList,
            };
        }
    }
</script>

<style scoped>

</style>

